<template>
  <div>
    <el-card style="margin: 20px 0px">
      <CategorySelect @getCategoryId="getCategory"></CategorySelect>
    </el-card>
    <el-card v-if="attrList.length">
      <!-- 按钮 -->
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addAttr"
        v-if="isTableShow"
        >添加属性</el-button
      >
      <!-- 表格 -->
      <el-table :data="attrList" style="width: 100%" v-if="isTableShow">
        <el-table-column type="index" label="序号" width="80px" align="center">
        </el-table-column>
        <el-table-column prop="attrName" label="属性名称" width="width">
        </el-table-column>
        <el-table-column prop="prop" label="属性值列表" width="width">
          <template slot-scope="{ row }">
            <el-tag
              type="success"
              v-for="attrValue in row.attrValueList"
              :key="attrValue.id"
              style="margin: 0px 20px"
              >{{ attrValue.valueName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="150">
          <template slot-scope="{ row }">
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="edit(row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加属性|修改属性的结构 -->
      <div v-if="!isTableShow">
        <!-- 表单 -->
        <el-form :inline="true" ref="form" label-width="80px">
          <el-form-item label="属性名">
            <el-input
              v-model="attrInfo.attrName"
              placeholder="请输入属性名"
              autofocus="autofocus"
            ></el-input>
          </el-form-item>
        </el-form>
        <span>请输入属性值:</span>
        <br />
        <br />
        <!-- 动态tag -->
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput"
          :disabled="!this.attrInfo.attrName"
          >+{{ attrInfo.attrName }}</el-button
        >

        <br />
        <br />
        <br />
        <br />
        <br />

        <!-- 两个按钮 -->
        <el-button
          type="primary"
          @click="addOrUpdateAttr"
          :disabled="!attrInfo.attrName||dynamicTags.length==0"
          >保存</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "Attr",
  data() {
    return {
      //flag为true，代表添加属性.false代表编辑属性
      flag: true,
      c1Id: "",
      c2Id: "",
      c3Id: "",
      //接受平台属性的数据
      attrList: [],
      //控制是否显示商品属性表格
      isTableShow: true,
      //收集新增属性|修改属性使用的
      attrInfo: {
        attrName: "", //属性名
        attrValueList: [
          //属性值，因为属性值可以有多个因此用数组，每一个属性值都是一个对象需要attrId，valueName
          // attrId: 0,
          // valueName: "string",
        ],
        categoryId: 0, //三级分类的id
        categoryLevel: 3, //因为服务器也需要区分几级id
      },

      dynamicTags: ["属性值一", "属性值二", "属性值三"],
      inputVisible: false,
      inputValue: "",
    };
  },
  methods: {
    //自定义事件的回调
    getCategory({ c1Id, c2Id, c3Id }) {
      (this.c1Id = c1Id), (this.c2Id = c2Id), (this.c3Id = c3Id);
      this.getAttrList(c1Id, c2Id, c3Id);
    },
    async getAttrList(c1Id, c2Id, c3Id) {
      // console.log(c1Id);
      // console.log(c2Id);
      // console.log(c3Id);
      let result = await this.$API.attr.reqAttrList(c1Id, c2Id, c3Id);
      if (result.code == 200) {
        this.attrList = result.data;
      }
    },

    //增添或改变属性,点保存
    async addOrUpdateAttr() {

      this.attrInfo.attrValueList = [];
      
      for (let value of this.dynamicTags) {
        if (this.flag) {
          this.attrInfo.attrValueList.push({
            attrId: undefined,
            valueName: value,
          });
        } else {
          this.attrInfo.attrValueList.push({
            attrId: this.attrInfo.id,
            valueName: value,
          });
        }
      }

      this.attrInfo.categoryId = this.c3Id;

      let result = await this.$API.attr.reqAddOrUpdateAttr(this.attrInfo);
      // console.log(result);
      //展示平台属性的信号量进行切换
      this.isTableShow = true;
      //提示消失
      this.$message({ type: "success", message: "保存成功" });
      //保存成功以后需要再次获取平台属性进行展示
      this.getAttrList(this.c1Id, this.c2Id, this.c3Id);
    },
    //取消
    cancel() {
      this.isTableShow = true;
      //把参数对象置空
      this.attrInfo = {
        attrName: "",
        attrValueList: [],
        categoryId: 0,
        categoryLevel: 3,
      };
      this.dynamicTags = ["属性值一", "属性值二", "属性值三"];
    },
    //添加属性
    addAttr() {
      this.isTableShow = false;
      this.flag = true;
    },
    //编辑属性
    edit(row) {
      this.flag = false;
      this.isTableShow = false;
      this.attrInfo = cloneDeep(row);

      this.dynamicTags = [];
      for (let value of row.attrValueList) {
        this.dynamicTags.push(value.valueName);
      }
    },
    // 动态tag
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    // 动态tag
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 动态tag
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
  },
};
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>